<template>
	<view class="container">
		
		<view class="tui-bg-box">
			<image src="../../static/login_bg.png" class="tui-bg-img"></image>
			<image src="/static/image/login_logo.png" class="tui-photo"></image>
			<view class="tui-login-name">{{shopInfo.name}}</view>
		</view>
		<form>
			<view class="tui-login-from">
				<view class="tui-line-cell">
					<tui-icon name="mobile" :size="20" color='#ff4900'></tui-icon>
					<input class="tui-input" placeholder="请输入手机号码" maxlength="11" v-model="phone" type="number" />
				</view>
				<view class="tui-line-cell">
					<tui-icon name="pwd" :size="20" color='#ff4900'></tui-icon>
					<input class="tui-input" placeholder="登录密码" maxlength="20" v-model="pwd" type="password" />
				</view>
				<view class="tui-line-cell">
					<tui-icon name="attestation" :size="20" color='#ff4900'></tui-icon>
					<input class="tui-input" v-model="sms_code" placeholder="请输入验证码" maxlength="6" />
					<tui-button size="26" type="warning" shape="circle" :plain="true" :disabled="disabled" @click="btnSend">{{btnText}}</tui-button>
				</view>
				<view class="tui-line-cell">
					<tui-icon name="friendadd" :size="20" color='#ff4900'></tui-icon>
					<input class="tui-input" :placeholder="inviteTip" maxlength="10" v-model="invite_code" type="text" />
				</view>
				<button type="warn" class="btn-warning tui-btn-submit" hover-class="btn-hover" @click="formLogin">注册</button>
				<view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">
					<text class="tui-protocol-gray">手机号作为唯一登录凭证</text>
				</view>
				<view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">
					<text class="tui-protocol-gray">若未收到短信验证码,直接输入666888</text>
				</view>
				
				<view class="tui-protocol tui-protocol-last" hover-class="opcity" :hover-stay-time="150" @click="goLogin()()">
					<text class="tui-protocol-blue">已有账号?去登录</text>
				</view>
				
			</view>
		</form>
		
		<footer-menu :tabCur="2"></footer-menu>
		
	</view>
</template>

<script>

	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	const util = require('../../utils/util.js')
	export default {
		components: {
			footerMenu,
			tuiIcon,
			tuiButton
		},
		data() {
			return {
				disabled: false,
				btnText: "获取验证码",
				phone: "",
				type: "warning",
				code: "",
				sms_code: "",
				
				invite_code: '',
				pwd: '',
				shopId: 0,
				shopInfo: [],
				
				inviteTip: '邀请码(可不填)',
				
			}
		},
		methods: {
			
			goReg: function(){
				uni.navigateTo({
					url: '/pages/my/reg'
				})
			},
			
			goFindPwd: function(){
				uni.navigateTo({
					url: '/pages/my/find-pwd'
				})
			},
			
			goLogin: function(){
				uni.navigateTo({
					url: '/pages/my/login'
				})
			},
			
			//得到商户基本信息
			getShopBaseInfo: function(){
				uni.request({
					url: this.$apiUrl + '/api/shop/baseInfo',
					header: {
						'shopId': uni.getStorageSync('shopId'),
					},
					success: (res) => {
						this.shopInfo = res.data['data'];
						/* if(this.shopId == 100) {
							this.invite_code = 'DW001';
						} */
					}
				});
			},
			
			
			doLoop: function(seconds) {
				seconds = seconds ? seconds : 60;
				this.btnText = seconds + "s后获取";
				let countdown = setInterval(() => {
					if (seconds > 0) {
						this.btnText = seconds + "s后获取"
							--seconds;
					} else {
						this.btnText = "获取验证码";
						this.disabled = false;
						this.type = "primary";
						clearInterval(countdown);
					}
				}, 1000);
			},
			
			btnSend: function() {
				if (util.isNullOrEmpty(this.phone)) {
					this.tui.toast('请输入手机号码');
					return
				} else if (!util.isMobile(this.phone)) {
					this.tui.toast('请输入正确的手机号码');
					return
				}
				this.disabled = true;
				this.btnText = "请稍候...";
				this.type = "gray";
				
				//真实的去发送短信验证码
				uni.request({
					url: this.$apiUrl+ '/api/common/sendSmsCodeAli',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: {
						phone: this.phone,
						type: 1,
					},
				    success: (res) => {
						let resMsg = res.data['msg'];
						let resErr = res.data['error'];
						this.tui.toast(resMsg);
						if(resErr == 0 ){		//发送成功的时候
							setTimeout(() => {
								this.doLoop(60)
							}, 500)
						}else{					//发送失败，刷新当前页面
							setTimeout(() => {
								uni.navigateBack();
							}, 3000)
						}
					}
				});
			},
			
			formLogin: function() {
				let phone = this.phone;
				let pwd = this.pwd;
				let sms_code = this.sms_code;
				let invite_code = this.invite_code;
				
				if (util.isNullOrEmpty(phone)) {
					this.tui.toast('请输入手机号码');
					return
				} else if (!util.isMobile(phone)) {
					util.toast('请输入正确的手机号码');
					return
				}
				if (util.isNullOrEmpty(sms_code)) {
					this.tui.toast('请输入验证码');
					return
				}
				if (util.isNullOrEmpty(pwd)) {
					this.tui.toast('请输入登录密码');
					return
				}
				
				let shopId = uni.getStorageSync('shopId');
				if(!shopId) {
					this.tui.toast('商户信息有误,请重新扫码进入注册页面');
					return
				}
				
				//注册
				uni.request({
					url: this.$apiUrl+ '/api/user/reg',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: {
						phone: this.phone,
						pwd: this.pwd,
						sms_code: this.sms_code,
						invite_code: this.invite_code,
					},
					success: (res) => {
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						if(resErr == 0) {
							this.tui.toast("恭喜你,注册成功", 2000, true);
							let resData = res.data['data'];
							let userId = resData.user_id;
							let userToken = resData.user_token;
							let shopId = resData.shop_id;
							
							uni.setStorageSync('userId', userId);
							uni.setStorageSync('userToken', userToken);
							uni.setStorageSync('shopId', shopId);
							uni.setStorageSync('hasLogin', 1);
							
						//	this.tui.toast("手机号绑定成功", 2000, true);
							setTimeout(() => {
								uni.switchTab({ url: '/pages/my/index' })
							//	uni.navigateBack();
							}, 500);
						}else{
							this.tui.toast(resMsg, 2000, false);
						}
					}
				});
			},
		},
		
		onLoad: function(options) {
			
			let shopIdUrl = options.shop_id || 0;				//页面链接
			let shopIdSync = uni.getStorageSync('shopId');		//localStorage
			if(shopIdUrl) {
				uni.setStorageSync('shopId', shopIdUrl);
				if(shopIdSync) {
					if(shopIdUrl != shopIdSync) {
						uni.setStorageSync('shopId', shopIdUrl);
						uni.setStorageSync('userId', 0);
						uni.setStorageSync('userToken', '');
						uni.setStorageSync('hasLogin', false);
						this.shopId = shopIdUrl;
					}
				}
			}
			
			let inviteCode = options.invite_code || '';				//页面链接
			this.invite_code = inviteCode;
			
			this.shopId = uni.getStorageSync('shopId');
			this.getShopBaseInfo();
			if(this.shopId == 500 || this.shopId == 600 || this.shopId == 99 || this.shopId == 211) {
				this.inviteTip = '邀请码(必填)';
			}
		},
	}
</script>

<style>
	page {
		background: #fff;
	}

	.tui-bg-box {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding-top: 44upx;
	}

	.tui-photo {
		height: 200upx;
		width: 200upx;
		display: block;
		margin: 10upx auto 0 auto;
		border-radius: 50%;
		position: relative;
		z-index: 2;
	}

	.tui-login-name {
		width: 375upx;
		height: 40upx;
		font-size: 30upx;
		color: #fff;
		margin: 36upx auto 0 auto;
		text-align: center;
		position: relative;
		z-index: 2;
	}

	.tui-bg-img {
		width: 100%;
		height: 346upx;
		display: block;
		position: absolute;
		top: 0;
	}

	.tui-login-from {
		width: 100%;
		padding: 100upx 104upx 0 104upx;
		box-sizing: border-box;
	}

	.tui-input {
		font-size: 32upx;
		flex: 1;
		display: inline-block;
		padding-left: 32upx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell {
		padding: 27upx 0;
		display: -webkit-flex;
		display: flex;
		-webkiit-align-items: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-line-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1upx solid #e0e0e0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tui-top28 {
		margin-top: 28upx;
	}

	.tui-btn-class {
		width: 196upx !important;
		height: 54upx !important;
		border-radius: 27upx !important;
		font-size: 28upx !important;
		padding: 0 !important;
		line-height: 54upx !important;
	}

	.tui-btn-submit {
		margin-top: 100upx;
	}

	.tui-protocol {
		color: #333;
		font-size: 26rpx;
		text-align: center;
		width: 100%;
		margin-top: 60rpx;
	}
	
	.tui-protocol-last {
		padding-bottom: 200rpx;
		margin-bottom: 100rpx;
	}

	.tui-protocol-red {
		color: #f54f46;
	}
	
	.tui-protocol-blue {
		color: #007AFF;
	}
</style>